import React,{ Component } from 'react';
import {connect} from 'react-redux';
import Swiper from 'react-id-swiper';
import ReactPullLoad, {STATS} from 'react-pullload';
import {actions} from './_index.js';
class View extends Component {
    constructor(props){
        super(props)
        this.state = {
            hasMore: true,
            data: [],
            timer1:null,
            timer2:null,
            action: STATS.init,
            index: 30000,
            page:1
        }
        this.list = this.list.bind(this);
    }
    handleAction = action => {
        // console.info(action, this.state.action, action === this.state.action);
        //new action must do not equel to old action
        if (action === this.state.action) {
            return false;
        }

        if (action === STATS.refreshing) {
            this.handRefreshing();
        } else if (action === STATS.loading) {
            this.handLoadMore();
        } else {
            //DO NOT modify below code
            this.setState({
                action: action
            });
        }
    };

    handRefreshing = () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }
        this.state.timer2 = setTimeout(() => {
            //refreshing complete
            this.setState({
                hasMore: true,
                action: STATS.refreshed,
                index: 30000
            });
            this._ajaxFn(1,[])
        }, 3000);
        this.setState({
            action: STATS.refreshing
        });
    };

    handLoadMore = () => {
        if (STATS.loading === this.state.action) {
            return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
            return;
        }
        let n=this.state.page;
        this.state.timer1 = setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                  action: STATS.reset,
                  hasMore: false
                });
            } else {
                n++;
                this.setState({
                  action: STATS.reset,
                  index: this.state.index - 1
                });
            }
            const {ulList} = this.props;
            this._ajaxFn(n,ulList)
        }, 3000);

        this.setState({
            action: STATS.loading
        });
    };
    _ajaxFn(number,ulList){
        const {onAjaxFn} = this.props;
        const ajaxCfg = {
            url:'/home/mediareports',
            cfg:{
                page_number:number,
                page_size:'20'
            },
            headers:{}
        }
        // this.state.timer = setTimeout(function(){
        //     onAjaxFn('发送数据',ajaxCfg)
        // },3000)

        onAjaxFn('发送数据',ajaxCfg,ulList);

    }
    componentDidMount(){
        this._ajaxFn(1,[]);
    }
    componentWillUnmount(){
        clearTimeout(this.state.timer)
    }
    list(){
        const {ulList} = this.props;
        const list = ulList.map((val,key)=>{
            return(
                <li key={key}>{key}{val.main_title}</li>
            )
        })
        return list;
    }
    render(){
        const { ulList} = this.props;
        const { hasMore } = this.state;
        return(
            <React.Fragment>
                <ReactPullLoad
                  downEnough={150}
                  action={this.state.action}
                  handleAction={this.handleAction}
                  hasMore={hasMore}
                  distanceBottom={100}
                >
                <div className="k_header"></div>
                <div className="k_banner">
                    <Swiper>
                      <div>Slide #1</div>
                      <div>Slide #2</div>
                      <div>Slide #3</div>
                      <div>Slide #4</div>
                      <div>Slide #5</div>
                    </Swiper>
                </div>
                <div className="k_ul_list">
                    <ul>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                        <li>这是你第一个li</li>
                    </ul>
                </div>
                <div className="k_ul_list">
                    <ul>{ulList.length!==0 ? this.list() : []}</ul>
                </div>
                </ReactPullLoad>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state) =>{
    console.log(state)
    return {
        ulList:state.axData
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		onAjaxFn: (text,ajaxCfg,ulList) => dispatch(actions.getApi(text,ajaxCfg,dispatch,ulList))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
